<template>
  <div class="createPost-main-container">
    <el-container>
      <el-aside style="leftw">
        <el-row>
          <el-button class="btn-full" type="primary" icon="el-icon-plus" @click="hanldeCreateQuestion">创建问卷</el-button>
        </el-row>
        <el-row class="left-list">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#F7F7F7"
            text-color="#000"
            active-text-color="#151583"
            @select="handleClick"
          >
            <el-menu-item index="1">
              <i class="el-icon-postcard" />
              <span slot="title">全部问卷</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-thumb" />
              <span slot="title">已发布问卷</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-c-scale-to-original" />
              <span slot="title">未发布问卷</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-delete" />
              <span slot="title">回收站</span>
            </el-menu-item>
          </el-menu>
        </el-row>
      </el-aside>
      <el-main>
        <!-- <el-row style="height:50px;">
          <label style="line-height: 48px;font-size:18px;">问卷列表</label>
          <el-input class="search-input" placeholder="请输入问卷名进行搜索" suffix-icon="el-icon-search" />
        </el-row> -->
        <el-row>
          <mainQuestion v-for="item in questionList" :key="item.questionId" :question="item" @query="handleClick(curIndex, '')" />
        </el-row>
      </el-main>
    </el-container>
    <!-- 模态框 -->
    <div style="clear:both;">
      <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" :show-close="false">
        <headerCaptionEdit @close="dialogVisible = false" @save="handleCreateHeaderCaption" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import MainQuestion from './components/main-question'
import HeaderCaptionEdit from './components/header-caption-edit'
import { getQuestionListByUserCode, saveQuestion } from '@/api/questionnaire'
const moment = require('moment')
export default {
  components: {
    MainQuestion,
    HeaderCaptionEdit
  },
  data() {
    return {
      questionList: [],
      allQuestionList: [],
      title: '新增问卷',
      dialogVisible: false,
      curIndex: '1'
    }
  },
  mounted: function() {
    this.handleQuery()
  },
  methods: {
    handleQuery() {
      const that = this
      getQuestionListByUserCode({
        userCode: this.$store.state.user.name
      }).then(res => {
        const all = res.data.sort(function(a, b) {
          return b.createTime < a.createTime ? -1 : 1
        })
        all.forEach(aa => {
          aa.createTimeFormat = moment(aa.createTime).format('YYYY-MM-DD HH:mm:ss')
        })
        // 按照时间排序
        that.questionList = all.filter(k => k.deleteStatus !== '1')
        that.allQuestionList = all
      })
    },
    handleClick(index, indexPath) {
      this.curIndex = index
      if (index === '1') {
        this.handleQuery()
      } else if (index === '2') {
        this.questionList = this.allQuestionList.filter(m => m.questionStatus === '1' && m.deleteStatus !== '1' && m.completeDeleteStatus !== '1')
      } else if (index === '3') {
        this.questionList = this.allQuestionList.filter(m => m.questionStatus === '0' && m.deleteStatus !== '1' && m.completeDeleteStatus !== '1')
      } else {
        this.questionList = this.allQuestionList.filter(m => m.deleteStatus === '1' && m.completeDeleteStatus !== '1')
      }
    },
    hanldeCreateQuestion() {
      this.dialogVisible = true
    },
    handleCreateHeaderCaption(titleCaption, content) {
      const that = this
      const crtQuestion = {
        questionExplain: content,
        questionCaption: titleCaption,
        questionStatus: '0',
        deleteStatus: '0',
        hideQuestionNumber: '0',
        randomQuestionFlag: '0',
        questionDetailList: [],
        createUserCode: this.$store.state.user.name
      }
      saveQuestion(crtQuestion).then(res => {
        if (res.data) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          that.dialogVisible = false
          that.handleQuery()
        }
      })
    }
  }
}
</script>

<style lang="scss" scope>
@import "~@/styles/mixin.scss";

.createPost-main-container {
  padding: 20px 60px 0px 20px;

  .el-menu-item.is-active {
    background-color: #D6D6D6 !important;
  }
  main {
    padding-top: 8px !important;
  }
  .el-card__header {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .el-aside {
    background-color: white;
  }

  .leftw {
    width: 140px;
  }
  .btn-full {
    width: 100%;
    height: 50px;
  }

  .left-list {
    margin-top: 12px;
  }

}
.search-input {
  width: 200px;
  float: right;
}
</style>
